<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<meta name="misapplication-tap-highlight" content="no" />
		<meta name="HandheldFriendly" content="true" />
		<meta name="MobileOptimized" content="320" />
		<title></title>
		<link rel="stylesheet" href="../css/mui.min.css" />
		<link rel="stylesheet" href="../css/base.css" />
		<style>
			.mui-control-content {
				height: 100%;
				background: white;
			}
			
			.mui-control-content .mui-loading {
				margin-top: 50px;
			}
			
			.mui-segmented-control.mui-segmented-control-inverted .mui-control-item {
				color: black;
			}
			
			.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
				color: #00D5C5;
			}
			
			
			.mui-table-view li {
				padding: 0px;
			}
			
			.head-img {
				width: 60px;
				height: 60px;
				overflow: hidden;
				border-radius: 50%;
				margin-right: 10px;
			}
			
			.head-img img {
				width: 100%;
				height: 100%;
			}
			
			.containers {
				padding: 10px;
			}
			
			.green-color {
				color: #00d5c5;
			}
			
			.gray-color {
				color: #888;
			}
			
			.containers .right-img-w {
				width: 30px;
				height: 30px;
			}
			
			ul,
			li {
				list-style: none;
			}
			
			.li-style li {
				float: left;
				width: 30%;
				margin-right: 3%;
			}
			
			.ping ul li {
				margin-top: 5px;
			}
			
			.li-style li img {
				width: 100%;
			}
			
			.ping {
				clear: both;
			}
			
			html,
			#slider,
			.mui-content {
				width: 100%;
				height: 100%;
			}
			
			.mui-slider-group {
				/* height: calc(100% - 45px);*/
				height: calc(100%);
			}
			
			.mui-content {
				background-color: #FFFFFF;
			}
			
			.float-button {
				position: fixed; //关键	         
				width: 50px;
				bottom: 150px;
				right: 30px;
				z-index: 2;
			}
			.btn11{
				background-color: #a3a3a3;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">我的礼品</h1>
			<a class="mui-btn mui-btn-blue mui-btn-link mui-pull-right" style="color: white;">
				<span onclick="goTuikuan()">退款申请</span>
				
			</a>
		</header>
		<div class="mui-content fill-all flex">
			<div id="slider" class="mui-slider flex-1 flex v-flex">
				<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<a class="mui-control-item mui-active" href="#item1mobile">
						求助列表
					</a>
					<a class="mui-control-item" href="#item2mobile">
						我的求助
					</a>
					<a class="mui-control-item" href="#item3mobile">
						我的回答
					</a>

				</div>
				<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4" style="background: #00D5C5;"></div>
				<div class="flex-1 mui-slider-group">
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view">
									<!--<li onclick="goDetail()" class="mui-table-view-cell">-->

									<!--item start-->

									<div class="flex containers">
										<div class="head-img">
											<img src="../img/bg-01.png" />
										</div>
										<div class="flex-1">
											<div class="flex">
												<div class="flex-1 flex v-center">
													<span class="green-color">贝多芬.李</span>
													<img style="width: 25px;" src="../img/money.png" />
													<span class="green-color">10</span>
												</div>						
											</div>
											<div onclick="goDetail()" class="contents">
												<span class="gray-color">12小时前</span>
												<div id="">
													少时诵诗书所所所所所所所所所所所 休息休息 吃饭饭付付
												</div>
												<div id="">
													<ul class="li-style">
														<li><img src="../img/bg-01.png" /></li>
														<li><img src="../img/bg-01.png" /></li>
														<li><img src="../img/bg-01.png" /></li>
														<li><img src="../img/bg-01.png" /></li>
													</ul>
												</div>
												<div class="ping"></div>
												<div>
													来自
													<钢琴弹奏速成书籍> 作者:辛迪
												</div>
												<div style="font-size: 1.2rem;">
													<span class="blue">贝多芬:</span>
													<span class="gray">你拍下试试,试试就试试</span>

												</div>
											</div>

										</div>
									</div>
									<!--item end-->
									<div class="flex containers">
										<div class="head-img">
											<img src="../img/bg-01.png" />
										</div>
										<div class="flex-1">
											<div class="flex">
												<div class="flex-1 flex v-center">
													<span class="green-color">贝多芬.李</span>
													<img style="width: 25px;" src="../img/money.png" />
													<span class="green-color">10</span>
												</div>
												
											</div>
											<div class="contents">
												<span class="gray-color">12小时前</span>
												<div id="">
													少时诵诗书所所所所所所所所所所所 休息休息 吃饭饭付付
												</div>
												<div id="">
													<ul class="li-style">
														<li><img src="../img/bg-01.png" /></li>
														<li><img src="../img/bg-01.png" /></li>
														<li><img src="../img/bg-01.png" /></li>
														<li><img src="../img/bg-01.png" /></li>
													</ul>
												</div>
												<div class="ping"></div>
												<div>
													来自
													<钢琴弹奏速成书籍> 作者:辛迪
												</div>
												<div style="font-size: 1.2rem;">
													<span class="blue">贝多芬:</span>
													<span class="gray">你拍下试试,试试就试试</span>

												</div>
											</div>

										</div>
									</div>

								</ul>
							</div>

						</div>
						<div class="float-button" onclick="goNew()">
							<img style="width: 70px;" src="../img/icon-help.png" />
						</div>

					</div>
					<div id="item2mobile" class="mui-slider-item mui-control-content">
						<div id="scroll2" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<div class="mui-loading">
									<div class="mui-spinner">

									</div>
								</div>
							</div>
						</div>

					</div>
					<div id="item3mobile" class="mui-slider-item mui-control-content">
						<div id="scroll3" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<div class="mui-loading">
									<div class="mui-spinner">

									</div>
								</div>
							</div>
						</div>

					</div>

				</div>
			</div>

		</div>

		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script src="../js/local-keys.js"></script>
		<script src="../js/utils.js"></script>
		<script>
			(function($) {
					$('.mui-scroll-wrapper').scroll({
						indicators: true //是否显示滚动条
					});
					//右上角的按钮是状态,不能点击
					var html2 = '<div class="flex containers"><div class="head-img"><img src="../img/bg-01.png" /></div><div class="flex-1"><div class="flex"><div class="flex-1 flex v-center"><span class="green-color">贝多芬.李</span><img style="width: 25px;" src="../img/money.png" /><span class="green-color">10</span></div><div class="flex v-center"><button class="btn11">已退款</button></div></div><div onclick="goMyHelp()" class="contents"><span class="gray-color">12小时前</span><div id="">少时诵诗书所所所所所所所所所所所 休息休息 吃饭饭付付</div><div id=""><ul class="li-style"><li><img src="../img/bg-01.png" /></li><li><img src="../img/bg-01.png" /></li><li><img src="../img/bg-01.png" /></li><li><img src="../img/bg-01.png" /></li></ul></div><div class="ping"></div><div>来自<钢琴弹奏速成书籍> 作者:辛迪</div><div style="font-size: 1.2rem;"><span class="blue">贝多芬:</span><span class="gray">你拍下试试,试试就试试</span></div></div></div></div>';
					
					var html3 = '<div class="flex containers"><div class="head-img"><img src="../img/bg-01.png" /></div><div class="flex-1"><div class="flex"><div class="flex-1 flex v-center"><span class="green-color">贝多芬.李</span><img style="width: 25px;" src="../img/money.png" /><span class="green-color">10</span></div></div><div onclick="goMyAnswer()" class="contents"><span class="gray-color">12小时前</span><div id="">少时诵诗书所所所所所所所所所所所 休息休息 吃饭饭付付</div><div id=""><ul class="li-style"><li><img src="../img/bg-01.png" /></li><li><img src="../img/bg-01.png" /></li><li><img src="../img/bg-01.png" /></li><li><img src="../img/bg-01.png" /></li></ul></div><div class="ping"></div><div>来自<钢琴弹奏速成书籍> 作者:辛迪</div><div style="font-size: 1.2rem;"><span class="blue">贝多芬:</span><span class="gray">你拍下试试,试试就试试</span></div></div></div></div>';
					var item2 = document.getElementById('item2mobile');
					var item3 = document.getElementById('item3mobile');
					document.getElementById('slider').addEventListener('slide', function(e) {
						var selects = e.detail.slideNumber;
						if(selects === 1) {
							if(item2.querySelector('.mui-loading')) {
								setTimeout(function() {
									item2.querySelector('.mui-scroll').innerHTML = html2;
								}, 500);
							}
						} else if(selects === 2) {
							if(item3.querySelector('.mui-loading')) {
								setTimeout(function() {
									item3.querySelector('.mui-scroll').innerHTML = html3;
								}, 500);
							}
						}
					});
				}

			)(mui);
			mui.plusReady(function() {

				}

			);
            //求组列表详情
			function goDetail() {
				mui.openWindow({
					url: "home-help-detail.html"
				});
			}
			//我的回答详情
			function goMyAnswer(){				
				mui.openWindow({
					url: "home-help-myanswer.html"
				});
			}
			
			//我的求助详情
			function goMyHelp(){
				mui.openWindow({
					url: "home-help-myhelp.html"
				});
			}
			
            //退款申请
			function goTuikuan() {
				mui.openWindow({
					url: "home-help-tuikuan.html"
				});
			}
            //求助列表添加新的求助
			function goNew() {
				mui.openWindow({
					url: "home-help-new.html"
				});
			}
		</script>
	</body>

</html>